<template>
  <div id="index" ref="appRef">
    <div class="bg home">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="handleClick"
        >
          <el-tab-pane label="页面1" name="first"> <page1 /></el-tab-pane>
          <el-tab-pane label="页面2" name="second"> <page2 /></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import page1 from "./page1/index.vue";
import page2 from "./page2/index.vue";
export default {
  mixins: [drawMixin],
  data() {
    return {
      loading: true,
      activeName: "first",
    };
  },
  components: {
    page1,
    page2,
  },

  mounted() {
    this.cancelLoading();
  },

  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  // background: url("~@/assets/pageBg.png") center no-repeat;
  // background-size: 100% 100%;
  position: relative;
}

.host-body {
  position: relative;
}
</style>
